<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/query.js"></script>
<script src="/room/js/room.js"></script>
<style>
    body{
        display: flex;
        flex-wrap: wrap;
    }

    .table{
        width: 100%;
        height: auto;
        border: 1px solid blueviolet;
    }
    .button{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .manage{
        position: absolute;
        right:40px;
        top: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content{
        border: 3px solid #000;
        width: 400px;
        height: 300px;
        padding: 50px;
        background-color: white;
        display: flex;
        flex-wrap: wrap;
    }

    .content div{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 400px;
        height: 40px;
    }


    .content>div:first-child{
        display: flex;
        justify-content: center;
    }

    .content>div:last-child{
        display: flex;
        justify-content: space-around;
        height: 30px;
    }

    .content>div:first-child>h3{
        margin: 0;
    }

    .addRoomInfo{
        background-color: rgba(255,0,0,0.2);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }
    .find{
        background-color: rgba(255,0,0,0.2);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
    }
    .find-div{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 500px;
        height: 500px;
        background-color: aliceblue;

    }
    .find-div>div:first-child{
        width: 399px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .find-div>div:first-child>div{
        width: 199px;
        height: 50px;
    }
    .find-div1{
        width: 600px;
        height: 400px;
        background-color: antiquewhite;
    }
    .tab{
        width: 100%;
        height: auto;
        border: 1px solid darkcyan;
    }
    .button12 {
        width:100px;
        height: 30px;
        text-align:center;
        line-height:100%;
        padding:0.3em;
        font:16px Arial,sans-serif bold;
        font-style:normal;
        text-decoration:none;
        margin:2px;
        vertical-align:text-bottom;
        zoom:1;
        outline:none;
        font-size-adjust:none;
        font-stretch:normal;
        border-radius:50px;
        box-shadow:0px 1px 2px rgba(0,0,0,0.2);
        text-shadow:0px 1px 1px rgba(0,0,0,0.3);
        color:#fefee9;
        border:0.2px solid #2299ff;
        background-repeat:repeat;
        background-size:auto;
        background-origin:padding-box;
        background-clip:padding-box;
        background-color:#3399ff;
        background: linear-gradient(to bottom, #eeeff9 0%,#3399ff 100%);
    }

    .button12:hover {
        background: #268DFF;
    }
</style>
<body>
<table class="table" cellspacing="0">
    <thead><tr><th>房间地址</th><th>可容纳人数</th><th>已住人数</th><th>房间状态</th><th>房间类型</th><th>操作</th></tr></thead>
    <tbody id="data" style="text-align: center"></tbody>
</table>

<div class="button">
    <input type="button" value="添加房间" onclick="add()" class="button12">
</div>
<div id="cutDiv"></div>
<div class="manage" style="margin-top:100px ">
    <div class="content">
        <div><h3>查询房间信息</h3></div>
        <div>房间地址：<input type="text" name="address" id="address1"></div>
        <div>房间状态: <select name="roomType" id="roomState">
            <option selected>不限</option>
            <option>正常</option>
            <option>设施损坏</option>
        </select></div>
        <div>房间类型: <select name="roomType" id="roomType">
            <option >不限</option>
            <option>男生宿舍</option>
            <option>女生宿舍</option>
        </select></div>
        <div>可住房间: <select name="roomType" id="roomNum1">
            <option >不限</option>
            <option>可住</option>
        </select></div>
        <div>
            <input type="button" value="查找" onclick="findAll(1)"  class="button12">
        </div>
    </div>
</div>


<div class="addRoomInfo" id="addRoom">
    <div class="content">
                <div><h3>添加房间信息</h3></div>
                <div>房间地址：<input type="text" name="address" id="address"></div>
                <div>可容纳人数：<input type="text" name="manNum" id="manNum"></div>
                <div>房间类型: <select name="roomType" id="roomType2">
                    <option selected>男生宿舍</option>
                    <option>女生宿舍</option>
                </select></div>
                <div>
                    <input type="button" value="添加" onclick="addRomm()">
                    <input type="button" value="取消"></div>
    </div>
</div>



<div class="find" id="find">
    <div class="find-div">
        <div>
            <div>房间地址 :<span id="addressSpan"></span></div>
            <div> 已住人数:<span id="NumSpan"></span></div>
            <div> 房间类型:<span id="typeSpan"></span></div>
            <div> 可容纳人数:<span id="number"></span></div>
            <div> 房间状态:<span id="stateSpan"></span></div>
        </div>
        <div>
            <table width="400px" border="1"cellspacing="0"cellpadding="0"STYLE="border-collapse: collapse">
                <thead><tr><th>学生姓名</th><th>所在班级</th><th>联系电话</th></tr></thead>
                <tbody id="data1"></tbody>
            </table>
        </div>

        <div><input type="button" onclick="affirm()" value="确认"  class="button12"></div>
    </div>
</div>

<div class="find" id="findf">
    <div class="find-div1">
        <div>
            <input type="hidden" id="roomId">
            <table cellspacing="0" class="tab">
                <thead><tr><th>损坏描述</th><th>报损日期</th><th>是否解决 </th><th>处理设施</th></tr></thead>
                <tbody id="data3" style="text-align: center"></tbody>

            </table>
        </div>
        <div style="display: flex"><p>描述损害<p> <textarea style="width: 200px ;height: 100px" id="describe"></textarea></div>

        <div><input type="button" value="添加设施损坏记录" onclick="addf()"  class="button12"><input type="button" value="退出" onclick="quit()"  class="button12"></div>
    </div>
</div>
</body>
</html>